<template>
  <div class="base_chart">

    <div class="chart_place">
      <div :ref="refid" :id="chartid" class="w-100percent h-100percent"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'basechart',
  data() {
    let refid = this.randstr(6)
    let chartid = this.randstr(10)
    console.log('chart refid', refid)
    return {
      refid: refid,
      chartid: chartid,
      chart: null
    }
  },
  props: {
    chartType: {
      type: String,
      default() {
        return 'line'
      }
    },
    dataSource: {
      type: Array,
      default() {
        return [
          [1, 4, 15, 43],
          [2, 5, 20, 91],
          [3, 3, 30, 18]
        ]
      }
    },
    chartoption: {
      type: Object,
      default: function() {
        return {
          title: { text: 'default_chart' },
          dataset: {
            source: []
          },

          dataZoom: [
            {},
            {
              type: 'slider',
              yAxisIndex: [0]
            }
          ],
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          yAxis: {},
          xAxis: {},
          position: [0, 0],
          inside: [0, 0],
          height: '50%',
          width: '70%',
          series: [
            {
              name: '员工工时分布',
              type: 'line',

              color: ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
              barMaxWidth: 23
            }
          ]
        }
      }
    }
  },
  methods: {
    doOption(opt) {
      console.info('tag', opt)
      if (this.chart != null) {
        console.log('chart', opt)
        this.chart.setOption(opt)
      } else {
        let that = this
        console.log('chart_else', opt)

          // console.log('tag_timeout', that.$refs[that.refid])
          // that.chartoption.series[0].type = that.chartType
          // that.chartoption.dataset.source = that.dataSource
          console.log('do option init chart rfid', that.refid)
          this.initDom(function () {
            that.doOption(opt)
          })
          

      }
    },
    initDom(func){
      let that = this
      let dom  = document.getElementById(that.chartid)
      if(dom !=null){
          that.chart = that.$echarts.init(dom)
          func()
      }else {
        window.setTimeout(function (){
          console.log('init onces')
          that.initDom(func)
        },20);
      }
      
    }
  },

  mounted() {
    let that = this
    that.chartoption.series[0].type = that.chartType
    that.chartoption.dataset.source = that.dataSource
    this.initDom(function () {
            that.doOption(that.chartoption)
        })
  },
  created() {
    let that = this
    that.chartoption.series[0].type = that.chartType
    console.log('that.chartoption.dataset.source')
    console.log(that.chartoption)
    that.chartoption.dataset.source = that.dataSource
    let dom = document.getElementById(that.chartid)
    this.initDom(function () {
           that.doOption(that.chartoption)
    })
  }
}
</script>

<style scoped>
.base_chart {
  height: 100%;
  width: 100%;
  /* background: #abcdef; */
}
.chart_place {
  height: 80%;
  width: 100%;
  /* background: #000; */
  display: block;
}
</style>